<!DOCTYPE html>
<html lang="en" class="[--scroll-mt:9.875rem] lg:[--scroll-mt:6.3125rem]">
  {{template "common/head" .}}
  <body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900" x-data="{ showNavbar: false }">
    <div class="sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent">
      <div class="max-w-8xl mx-auto">
        <div class="py-4 border-b border-slate-900/10 lg:px-8 lg:border-0 dark:border-slate-300/10 mx-4 lg:mx-0">
          <div class="relative flex items-center">
            <!-- Logo -->
            <a class="mr-3 flex-none overflow-hidden md:w-auto" href="/">
              <picture>
                <source srcset="/img/asouldocs-dark.png" media="(prefers-color-scheme: dark)">
                <img src="/img/asouldocs-light.png" style="height: 28px">
              </picture>
            </a>
            <div class="flex items-center ml-auto">
              <nav class="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200">
                {{template "common/navbar" .}}
              </nav>
            </div>
          </div>
        </div>
        <div class="flex items-center p-4 border-b border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]">
          <button type="button" class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" @click="showNavbar = true">
            <span class="sr-only">Navigation</span>
            <svg width="24" height="24">
              <path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </button>
          <ol class="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0">
            {{if .Node.Category}}
              <li class="flex items-center">
                {{.Node.Category}}
                <svg width="3" height="6" aria-hidden="true" class="mx-3 overflow-visible text-slate-400"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>
              </li>
            {{end}}
            <li class="font-semibold text-slate-900 truncate dark:text-slate-200">{{.Node.Title}}</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="overflow-hidden">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
        <div class="hidden lg:block fixed z-20 inset-0 top-[3.8125rem] left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem] pb-10 px-8 overflow-y-auto">
          <nav id="nav" class="lg:text-sm lg:leading-6 relative">
            <div class="sticky top-0 -ml-0.5 pointer-events-none">
              <!-- <div class="bg-white dark:bg-slate-900 relative pointer-events-auto">
                <button type="button" class="hidden w-full lg:flex items-center text-sm leading-6 text-slate-400 rounded-md ring-1 ring-slate-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-slate-300 dark:bg-slate-800 dark:highlight-white/5 dark:hover:bg-slate-700">
                  <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-3 flex-none">
                    <path d="m19 19-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle>
                  </svg>
                  Quick search...
                  <span class="ml-auto pl-3 flex-none text-xs font-semibold">⌘K</span>
                </button>
              </div> -->
              <div class="h-8 bg-gradient-to-b from-white dark:from-slate-900"></div>
            </div>
            {{template "docs/navbar" .}}
          </nav>
        </div>
        <div class="lg:pl-[19.5rem]">
          <div class="max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
            <header id="header" class="relative z-20">
              <div>
                {{if .Node.Category}}
                  <p class="hidden lg:block mb-2 text-sm leading-6 font-semibold text-sky-500 dark:text-sky-400">
                    {{.Node.Category}}
                  </p>
                {{end}}
                {{if .Fallback}}
                  <div class="rounded-md bg-yellow-50 p-4 mb-4">
                    <div class="flex">
                      <div class="flex-shrink-0">
                        <!-- Heroicon: solid/exclamation -->
                        <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <div class="ml-3">
                        <h3 class="text-sm font-medium text-yellow-800">{{call .Tr "alert::warning"}}</h3>
                        <div class="mt-2 text-sm text-yellow-700">
                          <p>
                            {{call .Tr "docs::showing_default"}}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                {{end}}
                <div class="flex items-center">
                  <h1 class="inline-block text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">
                    {{.Node.Title}}
                  </h1>
                </div>
              </div>
            </header>
            <div id="content-wrapper" class="relative z-20 prose prose-slate mt-8 dark:prose-invert">
              {{Safe .Node.Content}}
            </div>
            <footer class="text-sm leading-6 mt-12">
              {{if or .Node.Previous .Node.Next}}
                <div class="mb-10 text-slate-700 font-semibold flex items-center dark:text-slate-200">
                  {{if .Node.Previous}}
                    <a class="group flex items-center hover:text-slate-900 dark:hover:text-white" href="{{.Node.Previous.Path}}">
                      <!-- Heroicon: outline/chevron-left -->
                      <svg viewBox="0 0 3 6" class="mr-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300">
                        <path d="M3 0L0 3L3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      {{.Node.Previous.Title}}
                    </a>
                  {{end}}
                  {{if .Node.Next}}
                    <a class="group ml-auto flex items-center hover:text-slate-900 dark:hover:text-white" href="{{.Node.Next.Path}}">
                      {{.Node.Next.Title}}
                      <!-- Heroicon: outline/chevron-right -->
                      <svg viewBox="0 0 3 6" class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300">
                        <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  {{end}}
                </div>
              {{end}}

              {{if .Extension.Disqus.Enabled}}
                <div id="disqus_thread"></div>
                <script>
                  var disqus_config = function () {
                    this.page.url = '{{.Site.ExternalURL}}{{.URL}}?lang={{.Lang}}';
                    this.page.identifier = '{{.URL}}?lang={{.Lang}}';
                  };
                  (function() {
                    var d = document, s = d.createElement('script');
                    s.src = 'https://{{.Extension.Disqus.Shortname}}.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', +new Date());
                    (d.head || d.body).appendChild(s);
                  })();
                </script>
              {{end}}

              {{if .Extension.Utterances.Enabled}}
                <script src="https://utteranc.es/client.js"
                  repo="{{.Extension.Utterances.Repo}}"
                  issue-term="{{.Extension.Utterances.IssueTerm}}"
                  label="{{.Extension.Utterances.Label}}"
                  theme="{{.Extension.Utterances.Theme}}"
                  crossorigin="anonymous"
                  async>
                </script>
              {{end}}

              <div class="pt-10 pb-28 border-t border-slate-200 sm:flex justify-between text-slate-500 dark:border-slate-200/5">
                <div class="mb-6 sm:mb-0 sm:flex">
                  <p>
                    © {{Year}} {{call .Tr "footer::copyright"}}
                  </p>
                </div>
              </div>
            </footer>

            <div class="fixed z-20 top-[3.8125rem] bottom-0 right-[max(0px,calc(50%-45rem))] w-[19.5rem] py-10 px-8 overflow-y-auto hidden xl:block">
              {{if .Node.Headings}}
                <div class="block">
                  <h5 class="text-slate-900 font-semibold mb-2 text-sm leading-3 dark:text-slate-100">
                    {{call .Tr "docs::on_this_page"}}
                  </h5>
                  <ul class="text-slate-700 text-sm leading-6 mb-6">
                    {{range .Node.Headings}}
                      <li>
                        <a href="#{{Safe .ID}}" class="block py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                          {{Safe .Title}}
                        </a>
                      </li>
                      {{range .Items}}
                        <li class="ml-4">
                          <a href="#{{Safe .ID}}" class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300">
                            <svg width="3" height="24" viewBox="0 -9 3 24" class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500">
                              <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                            </svg>
                            {{Safe .Title}}
                          </a>
                        </li>
                      {{end}}
                    {{end}}
                  </ul>
                </div>
              {{end}}

              {{if not (eq .Language 1)}}
                <div class="block">
                  <h5 class="text-slate-900 font-semibold mb-2 text-sm leading-3 dark:text-slate-100">
                    {{call .Tr "footer::languages"}}
                  </h5>
                  <ul class="text-slate-700 text-sm leading-6">
                    {{range .Languages}}
                      <li>
                        <a class="py-1 block hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300" href="{{$.URL}}?lang={{.Name}}">
                          {{.Description}}
                        </a>
                      </li>
                    {{end}}
                  </ul>
                </div>
              {{end}}

              {{if .EditLink}}
                <div class="block mt-4">
                  <a class="hover:text-slate-900 dark:hover:text-slate-400 text-sm" target="_blank" href="{{.EditLink}}">
                    {{call .Tr "docs::edit_this_page"}}
                  </a>
                </div>
              {{end}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fixed z-50 inset-0 overflow-y-auto" style="display: none" x-show="showNavbar">
      <div class="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-slate-900/80" aria-hidden="true"></div>
      <div class="relative bg-white w-80 max-w-[calc(100%-3rem)] p-6 dark:bg-slate-800 min-h-full">
        <button type="button" class="absolute z-10 top-5 right-5 w-8 h-8 flex items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" tabindex="0" @click="showNavbar = false">
          <span class="sr-only">Close navigation</span>
          <svg viewBox="0 0 10 10" class="w-2.5 h-2.5 overflow-visible">
            <path d="M0 0L10 10M10 0L0 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
          </svg>
        </button>
        {{template "docs/navbar" .}}
      </div>
    </div>

    <script>
      // Wrap all <table> with a <div> to be able to have "overflow-y: auto"
      document.querySelectorAll('table').forEach(
        function(table) {
          var div = document.createElement('div');
          div.style.overflowY = 'auto';
          table.parentNode.insertBefore(div, table);
          div.appendChild(table);
        }
      );
    </script>
  </body>
</html>
